<template>
  <h2>HTTP-axios请求示例</h2>
  <div class="group">
    <button type="button" @click="requestGetRolesPageHandler">角色分页列表</button>
        <button type="button" @click="postRolesHandler">新增角色</button>
        <button type="button" @click="putRolesByRoleID">put修改数据</button>
        <button type="button" @click="deleteRolesByids">delete:删除角色</button>
        <button type="button" @click="patchRolesStatusByRoleID">patch:更新角色状态</button>F
  </div>
  <div class="group">
    <ul>
      <li v-for="item in roles" :key="item.id">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import {
  requestGetRolesPage,
  addRole,
  editRole,
  editRoleStatus,
  delRole,
} from '@/service/study1/demo3'

import { type RolesType } from '@/service/study1/demo3'
const roles = ref<RolesType[]>([])

// 角色分页列表
const requestGetRolesPageHandler = async () => {
  const res = await requestGetRolesPage({ pageNum: 1, pageSize: 40 })
  roles.value = res.data.list
}

// 新增角色
const postRolesHandler = async () => {
  const newRole = {
    id: 200,
    name: '333',
    code: '7878',
    sort: 2,
    status: 1,
    dataScope: 3
  }

  const res = await addRole(newRole)
  console.log(res.data.data)
}

// 修改角色
const putRolesByRoleID = () => {
  editRole('9', {
    code: '999922',
    name: '修改的name',
    sort: 1,
    status: 1
  })
}
// 删除角色
const deleteRolesByids = () => {
  delRole('9')
}
// 更新角色状态
const patchRolesStatusByRoleID = () => {
  editRoleStatus('9', 0)
}
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 10px;
  padding: 10px;
}
.group3 {
  border: 2px solid rgb(64, 163, 199);
  margin: 10px;
  padding: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>

